<template>
    <div class="main">
        <div class="main-header" v-if="buttons.length">
            <el-button v-for="(item, index) in buttons" :key="index" :type="item.path | formatType" :icon="item.icon"
                :disabled="item.path | formatDisabled(selection)" @click="tapButton(item)">{{ item.title }}</el-button>
        </div>
        <el-table 
            :data="programList"
            border
            header-cell-class-name="main-table-header"
            ref="table"
            class="main-table"
            height="100%"
            row-key="id"
            default-expand-all
            @selection-change="onSelectionChange"
            @row-click="onRowClick"
        >
            <el-table-column label="ID"></el-table-column>
            <el-table-column label="负责人"></el-table-column>
            <el-table-column label="项目名称"></el-table-column>
            <el-table-column label="项目期限"></el-table-column>
        </el-table>
        <el-pagination
            class="main-pagination"
            :current-page.sync="page"
            :page-size="limit"
            :total="total"
            @current-change="onCurrentChange"
            layout="total,jumper,prev,pager,next"
        ></el-pagination>
        <add-team v-model="addShow"></add-team>
    </div>
</template>
<script>
import addTeam from './add.vue'
export default {
    data() {
        return {
            addShow:false,
            programList:[],
            selection:[],
            total: 0,
            limit:20,
            page:1,
        }
    },
    components:{
        addTeam
    },  
    computed: {
        buttons() {
            return this.$store.state.buttons;
        }
    },
    methods: {
        onRowClick(row) {
            this.$refs.table.toggleRowSelection(row);
            this.$refs.info.show();
        },
        onSelectionChange(selection) {
            this.selection = selection;
        },
        onCurrentChange(index) {
            this.page = index;
        },
        tapButton(e) {
            switch (e.name) {
                case 'add':
                    this.addShow = true
                    break;
                case 'delete':
                    console.log('1')
                    break;
                case 'edit':
                    console.log('1')
                    break;
                default:
                    console.log('1')
                    break;
            }
        },

    }
}
</script>
<style lang="less">
</style>